import React, { useState } from 'react';
import { Table, Button, Space, Tooltip } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const MeetingCalendar = () => {
  // 设置时间范围状态
  const [timeRange, setTimeRange] = useState('past-week'); // 'past-week', 'next-two-weeks', 'next-four-weeks'
  
  // 过去一周的数据
  const pastWeekData = [
    {
      key: '1',
      id: 1,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '2',
      id: 2,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '3',
      id: 3,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '4',
      id: 4,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '暂定参加', type: 'warning' }
    },
    {
      key: '5',
      id: 5,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '6',
      id: 6,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '7',
      id: 7,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '8',
      id: 8,
      title: 'XXXX',
      startTime: '8月1日 (四) 11:30',
      endTime: '8月1日 (四) 11:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华',
      status: { text: '暂定参加', type: 'warning' }
    },
  ];
  
  // 未来两周的数据
  const nextTwoWeeksData = [
    {
      key: '1',
      id: 1,
      title: '产品设计讨论',
      startTime: '8月15日 (四) 10:00',
      endTime: '8月15日 (四) 11:00',
      location: '会议室3',
      participants: '张卓军、李丽莱、王明、陈思思',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '2',
      id: 2,
      title: '项目进度汇报',
      startTime: '8月16日 (五) 14:30',
      endTime: '8月16日 (五) 15:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华、赵强',
      status: { text: '暂定参加', type: 'warning' }
    },
    {
      key: '3',
      id: 3,
      title: '团队建设活动',
      startTime: '8月17日 (六) 09:30',
      endTime: '8月17日 (六) 11:30',
      location: '活动室1',
      participants: '张卓军、全体成员',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '4',
      id: 4,
      title: '客户需求沟通',
      startTime: '8月20日 (二) 10:30',
      endTime: '8月20日 (二) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华、客户代表',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '5',
      id: 5,
      title: '技术方案评审',
      startTime: '8月22日 (四) 15:30',
      endTime: '8月22日 (四) 17:00',
      location: '会议室4',
      participants: '张卓军、技术团队',
      status: { text: '暂定参加', type: 'warning' }
    },
  ];
  
  // 未来四周的数据
  const nextFourWeeksData = [
    {
      key: '1',
      id: 1,
      title: '产品设计讨论',
      startTime: '8月15日 (四) 10:00',
      endTime: '8月15日 (四) 11:00',
      location: '会议室3',
      participants: '张卓军、李丽莱、王明、陈思思',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '2',
      id: 2,
      title: '项目进度汇报',
      startTime: '8月16日 (五) 14:30',
      endTime: '8月16日 (五) 15:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华、赵强',
      status: { text: '暂定参加', type: 'warning' }
    },
    {
      key: '3',
      id: 3,
      title: '团队建设活动',
      startTime: '8月17日 (六) 09:30',
      endTime: '8月17日 (六) 11:30',
      location: '活动室1',
      participants: '张卓军、全体成员',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '4',
      id: 4,
      title: '客户需求沟通',
      startTime: '8月20日 (二) 10:30',
      endTime: '8月20日 (二) 11:30',
      location: '会议室1',
      participants: '张卓军、李丽莱、张新华、客户代表',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '5',
      id: 5,
      title: '技术方案评审',
      startTime: '8月22日 (四) 15:30',
      endTime: '8月22日 (四) 17:00',
      location: '会议室4',
      participants: '张卓军、技术团队',
      status: { text: '暂定参加', type: 'warning' }
    },
    {
      key: '6',
      id: 6,
      title: '月度总结会议',
      startTime: '8月30日 (五) 16:00',
      endTime: '8月30日 (五) 17:30',
      location: '大会议室',
      participants: '张卓军、李丽莱、张新华、部门主管',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '7',
      id: 7,
      title: '产品发布准备',
      startTime: '9月2日 (一) 10:00',
      endTime: '9月2日 (一) 11:30',
      location: '会议室2',
      participants: '张卓军、李丽莱、张新华、市场团队',
      status: { text: '请认参加', type: 'success' }
    },
    {
      key: '8',
      id: 8,
      title: '季度战略规划',
      startTime: '9月6日 (五) 14:00',
      endTime: '9月6日 (五) 16:00',
      location: '大会议室',
      participants: '张卓军、高管团队',
      status: { text: '暂定参加', type: 'warning' }
    },
    {
      key: '9',
      id: 9,
      title: '新员工培训',
      startTime: '9月10日 (二) 09:30',
      endTime: '9月10日 (二) 11:30',
      location: '培训室',
      participants: '张卓军、人力资源、新入职员工',
      status: { text: '请认参加', type: 'success' }
    },
  ];
  
  // 根据当前选择的时间范围获取数据
  const getDataSource = () => {
    switch(timeRange) {
      case 'next-two-weeks':
        return nextTwoWeeksData;
      case 'next-four-weeks':
        return nextFourWeeksData;
      default:
        return pastWeekData;
    }
  };
  
  // 获取会议数量
  const getMeetingCount = () => {
    return getDataSource().length;
  };

  // 表格列定义
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: '5%',
    },
    {
      title: '事件标题',
      dataIndex: 'title',
      key: 'title',
      width: '15%',
      ellipsis: {
        showTitle: false,
      },
      render: title => (
        <span>{title}</span>
      ),
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: '15%',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      width: '15%',
    },
    {
      title: '地点',
      dataIndex: 'location',
      key: 'location',
      width: '10%',
      ellipsis: {
        showTitle: false,
      },
      render: location => (
        <Tooltip placement="topLeft" title={location}>
          <span className="hover-content">{location}</span>
        </Tooltip>
      ),
    },
    {
      title: '参与者',
      dataIndex: 'participants',
      key: 'participants',
      width: '25%',
      ellipsis: {
        showTitle: false,
      },
      render: participants => (
        <Tooltip placement="topLeft" title={participants}>
          <span className="hover-content">{participants}</span>
        </Tooltip>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '15%',
      render: (status) => (
        <span 
          className={` ${status.type === 'success' ? 'status-success' : 'status-warning'}`}
          onClick={() => console.log('当前状态:', status.text)}
        >
          {status.text}
        </span>
      ),
    },
  ];

  // 设置行样式为偶数行浅蓝色背景
  const getRowClassName = (record, index) => {
    return index % 2 === 1 ? 'light-blue-row' : '';
  };

  return (
    <div className="calendar-container">
      <div className="header-section">
        <h2 className="page-title">趣议周章</h2>
        <p className="meeting-info">
          {timeRange === 'past-week' ? '后面7天' : timeRange === 'next-two-weeks' ? '未来两周' : '未来四周'}你一共有 
          <span className="meeting-count"> {getMeetingCount()} </span> 个会议
        </p>
        <div className="status-section">
          <div className="status-icon-container">
            <UserOutlined />
          </div>
          <span className="status-text">忙碌</span>
          <span className="status-description">(预估的值, 根据数量判断, 超过5个会议，少于10个为轻松)</span>
        </div>
        
        <div className="button-container">
          <Space>
            <Button 
              type={timeRange === 'past-week' ? 'primary' : 'default'} 
              ghost={timeRange === 'past-week'}
              onClick={() => setTimeRange('past-week')}
            >
              过去一周
            </Button>
            <Button 
              type={timeRange === 'next-two-weeks' ? 'primary' : 'default'} 
              ghost={timeRange === 'next-two-weeks'}
              onClick={() => setTimeRange('next-two-weeks')}
            >
              未来两周
            </Button>
            <Button 
              type={timeRange === 'next-four-weeks' ? 'primary' : 'default'} 
              ghost={timeRange === 'next-four-weeks'}
              onClick={() => setTimeRange('next-four-weeks')}
            >
              未来四周
            </Button>
          </Space>
        </div>
      </div>
      
      <Table 
        dataSource={getDataSource()} 
        columns={columns} 
        pagination={false}
        rowClassName={getRowClassName}
        className="table-container"
        scroll={{ x: true }}
      />

            {/* 添加自定义CSS样式 */}
            <style jsx="true">
        {`
          .calendar-container {
            padding: 20px;
          }
          .light-blue-row {
            background-color: #f0f8ff;
          }
          .ant-table-tbody > tr.light-blue-row:hover > td {
            background-color: #e6f4ff;
          }
          .page-title {
            margin: 0 0 10px 0;
          }
          .meeting-info {
            margin: 10px 0;
          }
          .status-icon-container {
            background-color: #ffd591;
            padding: 4px;
            border-radius: 4px;
            margin-right: 8px;
          }
          .status-text {
            margin-right: 8px;
          }
          .status-description {
            color: #999;
          }
          .button-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 15px;
          }
          .meeting-count {
            color: #1890ff;
            font-size: 18px;
            font-weight: bold;
          }
          .header-section {
            margin-bottom: 20px;
          }
          .status-section {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
          }
          .table-container {
            background-color: #fff;
            width: 100%;
          }
          .hover-content {
            cursor: pointer;
          }
     
          .status-success {
            color: #52c41a;
          }
          .status-warning {
            color: #fa8c16;
          }
          .ant-table-container {
            width: 100%;
          }
          .ant-table {
            width: 100%;
          }
          .ant-table-cell {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          /* 确保表格填满宽度 */
          .ant-table-wrapper {
            width: 100%;
          }
        `}
      </style>
      
    </div>

    
  );
};

export default MeetingCalendar;